<template>
  <div class="order cont1200">
    <div class="mb">
      <span class="xzdz">选择收货地址</span>
      <div class="radioBox">
        <el-radio-group v-model="radio">
          <div>
            <el-radio label="余杭良渚管家塘新苑54号乐购超市33">余杭良渚管家塘新苑54号乐购超市</el-radio>
          </div>
          <div>
            <el-radio label="余杭良渚管家塘新苑54号乐购超市36">余杭良渚管家塘新苑52号乐购超市18368015236</el-radio>
          </div>
          <div>
            <el-radio label="余杭良渚管家塘新苑54号乐购超市3">余杭良渚管家塘新苑51号乐购超市18368015236</el-radio>
          </div>
        </el-radio-group>
      </div>

      <div class="tjdz">
        <el-button>添加地址</el-button>
      </div>
    </div>

    <div class="mb clear">
      <span class="xzdz">确认订单信息</span>
      <el-row class="tabtitle">
        <el-col :span="12">
          <div class="grid-content bg-purple">宝贝</div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light">属性</div>
        </el-col>
        <el-col :span="2">
          <div class="grid-content bg-purple-light">单价</div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light">数量</div>
        </el-col>
        <el-col :span="2">
          <div class="grid-content bg-purple-light">小计</div>
        </el-col>
      </el-row>

      <el-row class="tabbody" v-for="item in orderData" :key="item.id">
        <el-col :span="2">
          <div class="grid-content bg-purple">
            <img :src="item.imageShow" class="f-l" alt srcset />
          </div>
        </el-col>
        <el-col :span="10">
          <div class="grid-content bg-purple-light">
            <div>{{item.name}}</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light">{{item.typename}}</div>
        </el-col>
        <el-col :span="2">
          <div class="grid-content bg-purple-light">￥{{item.price}}</div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light">
            <el-input-number
              size="mini"
              v-model="item.num"
              @click="this.$api.orderAPI.proNum(item.corId, item.num);"
            ></el-input-number>
          </div>
        </el-col>
        <el-col :span="2">
          <div class="grid-content bg-purple-light">{{item.num*item.price}}</div>
        </el-col>
      </el-row>

      <div class="SubmitOrders f-r">
        <div class="price">
          <b>实付款：</b>
          <span>￥{{totalPrice}}</span>
        </div>
        <div class="addres">
          <b>寄送至：</b>
          <span>{{radio}}</span>
        </div>
        <div class="addres">
          <b>收件人：</b>
          <span>邹洋18368015236</span>
        </div>
        <el-button type="danger" class="submit f-r" @click="posPrice">提交订单</el-button>
      </div>
    </div>
    <!-- {{ $route.params.productsData }} -->
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {
      radio: null,
      totalPrice: 0,
      time: "",
      orderData: {},
      plan: "", //缓存本页数据的标记
      sessF: ""
    };
  },
  watch: {
    orderData: {
      handler(newValue, oldValue) {
        var total = 0;
        for (var item in newValue) {
          total = total + newValue[item].price * newValue[item].num;
        }
        this.totalPrice = total;
        this.updata();
      },
      deep: true
    }
  },
  created: function() {
    var list = JSON.parse(sessionStorage.getItem(this.$route.query.plan));
    this.sessF = this.$route.query.plan;
    console.log("接受", list);
    for (var i in list) {
      // console.log("循环", list[i]);
      this.$set(this.orderData, "d" + i, list[i]);
    }
  },
  destroyed: function() {
    // console.log("清除",this.sessF);
    sessionStorage.removeItem(this.sessF);
  },

  methods: {
    //提交订单
    posPrice() {
      if (!this.ISnull(this.radio)) {
        return true;
      }
      var data = this.orderData;
      var list = [];
      for (var item in data) {
        var objdata = {};
        objdata.num = data[item].num;
        objdata.id = data[item].id;
        objdata.typeId = data[item].typeId;
        objdata.price = data[item].price;
        list.push(objdata);
      }
      console.log("list==", list, "data==", data);
      this.$api.orderAPI.getOrder({ list: list, address: this.radio });
    },

    updata() {
      //写入数据到浏览器缓存实现数据同步
      sessionStorage.setItem(
        this.$route.query.plan,
        JSON.stringify(this.orderData)
      );
    }
  },
  components: {}
};
</script>

<style lang="scss" type="text/css" scoped>
@import "../../common/style.scss";
.order {
  .mb {
    margin-top: 20px;
    .radioBox {
      margin-top: 10px;
      width: 100%;
    }
  }
  .xzdz {
    font-size: 25px;
  }

  .tabtitle {
    // height: 50px;
    line-height: 40px;
    border-bottom: 5px $main-color solid;
  }
  .tabbody {
    img {
      height: 100%;
    }
    .grid-content {
      line-height: 80px;
      height: 80px;
      overflow: hidden;
      text-overflow: ellipsis; /*以省略号...显示*/
    }
  }

  .SubmitOrders {
    // height: 40px;
    // background-color: antiquewhite;
    margin-top: 20px;
    .price {
      span {
        color: red;
        font-size: 25px;
      }
    }
    .submit {
      width: 260px;
      height: 50px;
    }
  }
}
</style>
